/**
 * Created by huanlai.whl on 2017/2/16.
 */

function ContentView(type) {
    this.type = type;
    this.defaultUrl = "./icon_default.png";
    this.initView();
};

ContentView.prototype.initView = function () {
    if (this.type == ContentView.Type.ALBUM) {
        this.domImpl = $(ContentView.contentDOMStr).get(0);
    } else if (this.type == ContentView.Type.MUSICLIST) {
        this.domImpl = $(ContentView.contentDOMStr2).get(0);
    }
};

ContentView.prototype.setData = function (datasrc) {
    this.datasrc = datasrc;
    this.dataArray = datasrc.sliderContent;
    var itemLenth = -1;
    if (this.type == ContentView.Type.ALBUM) {
        itemLenth = 9;
    } else if (this.type == ContentView.Type.MUSICLIST) {
        itemLenth = 6;
    }
    for (var i = 1; i <= itemLenth; i++) {
        var className = ".index" + i;
        var dom = this.domImpl.querySelector(className);
        dom.setAttribute("data-index", i - 1);
        var imgDom = dom.querySelector(".content-item-img");
        imgDom.classList.add("fe-lazyload");
        var textDom = dom.querySelector(".content-item-text");
        if (i == 3 && this.hasBroadCast) {
            textDom.classList.add("content-broadcast");
        }
        imgDom.setAttribute("fe-src", this.dataArray[i - 1].imgUrl);
        textDom.innerHTML = this.dataArray[i - 1].contentTitle;
    }
};

ContentView.prototype.getDomImpl = function () {
    return this.domImpl;
};

ContentView.prototype.blur = function () {
    var images = this.domImpl.getElementsByTagName('img');
    var length = images.length;
    for (var i = 0; i < length; i++) {
        images[i].setAttribute('src', this.defaultUrl);
    }
};


ContentView.prototype.onClicked = function (e) {
    var index = $("#" + e.target.id).data("index");
    console.log(' click index == ' + index);
};

ContentView.contentDOMStr = "<div class=\"content-item-wrapper\" fe-role=\"Scroll\" fe-cfg=\"scroll_dir:h,default_focus:yes,scroll_duration:0.3,scroll_easing:ease-out\"><div class=\"scroll-list\"><div class=\"content-item index1\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index2\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index3\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index4\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index5\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index6\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index7\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index8\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index9\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><p class=\"content-item-more\" fe-role=\"Widget\">\u66F4\u591A</p></div></div>";
ContentView.contentDOMStr2 = "<div class=\"content-musiclist-wrapper\" fe-role=\"Scroll\" fe-cfg=\"scroll_dir:h,default_focus:yes,scroll_duration:0.3,scroll_easing:ease-out\"><div class=\"scroll-list\"><div class=\"content-item index1\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index2\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index3\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index4\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index5\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><div class=\"content-item index6\" fe-role=\"Widget\"><img class=\"content-item-img\"><p class=\"content-item-text\"></p></div><p class=\"content-item-more\" fe-role=\"Widget\">\u66F4\u591A</p></div></div>";
ContentView.Type = {
    ALBUM: 1,
    MUSICLIST: 2
};
